<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuimini/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }

       body .layuimini-form > .layui-form-item > .layui-form-label,
       .layui-form-label{
            width: 120px !important;
            box-sizing: border-box;
        }

		body .layuimini-form > .layui-form-item > .layui-input-block,
        .layui-input-block{
			margin-left: 120px!important;
		}

        body .layui-input-block .layui-input-block{
            margin-left: 0px!important;
        }
    </style>
</head>
<body>
<form id="userForm" lay-filter="userForm" method="post" onsubmit="return false;">
<div class="layui-form layuimini-form" lay-filter="add_ncc">

    <div class="layui-form-item">
        <label class="layui-form-label required">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" lay-reqtext="监控项名称不能为空" placeholder="请输入监控项名称" value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">监控类型</label>
        <div  id="type" name="type"  class="layui-input-block"></div>
    </div>

    <div id="monitor_content"></div>

    <div class="layui-form-item">
        <label class="layui-form-label required">监控频率</label>
        <div class="layui-input-block">
            <select name="frequency" id="frequency">
                <option value="0">5秒钟</option>
                <option value="1">10秒钟</option>
                <option value="2">30秒钟</option>
                <option value="3">1分钟</option>
                <option value="4">3分钟</option>
                <option value="5">5分钟</option>
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label required">告警组</label>
        <div  id="linkgroup_id" name="linkgroup_id" class="layui-input-block"></div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">告警方式</label>
        <div  id="alert_type" name="alert_type" class="layui-input-block"></div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">备注信息</label>
        <div class="layui-input-block">
            <input type="text" name="remarks" id="remarks"   value="" class="layui-input">
        </div>
    </div>
    <div id="devops">
    <div id="details" class="haoge">
        <div class="layui-form-item">
            <label class="layui-form-label required">执行动作主机</label>
            <div  id="sv_ip" name="sv_ip" class="layui-input-block"></div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">执行自愈项</label>
            <div  id="ac_id" name="ac_id" class="layui-input-block"></div>
        </div>
    </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label ">操作</label>
        <button type="button"  class="layui-btn" onclick="add_div()">添加动作组</button>
        <button type="button"  class="layui-btn layui-btn-danger" onclick="del_div()">删除动作组</button>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label"></label>
       <button class="layui-btn" lay-filter="AddMonitor" type="submit" lay-submit >立即提交</button>
    </div>









</div>
</form>

<script src="/static/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/layui/sm_select/xm-select.js"></script>
<script>
        var detail_div = 1;
        function add_div() {
          var e = document.getElementById("details");
            var div = document.createElement("div");
            div.className = "haoge";
            div.id = "details" + detail_div;
            div.innerHTML = e.innerHTML.replace("sv_ip","sv_ip"+detail_div);
            div.innerHTML = div.innerHTML.replace("ac_id","ac_id"+detail_div);
            document.getElementById("devops").appendChild(div);
            //alert(JSON.stringify(div.childNodes[0]));
            var svip = xmSelect.render({
                    el: '#sv_ip'+detail_div,
                    name: 'sv_ip',
                    filterable: true,
                    radio: true,
                    data: []
                });
            svip.update({data:svip_data});

            var acid = xmSelect.render({
                    el: '#ac_id'+detail_div,
                    name: 'ac_id',
                    filterable: true,
                    radio: true,
                    data: []
                });
            acid.update({data:acid_data});


            detail_div++;
        }

        function del_div(){
            var id = "details" + (detail_div - 1).toString();
            console.log(id);
            var e = document.getElementById(id);
            if (e != null)
                document.getElementById("devops").removeChild(e);
            detail_div--;

        }

    </script>


<script>

    layui.use(['form','laydate'],function () {
        window.form = layui.form;
        var $ = layui.$;
        form.render();
        //监听提交
        form.on('submit(AddMonitor)', function (data) {
            debugger;
            //发异步，把数据提交
            var name = data.field.name;
            var type = data.field.type;

            var url = data.field.url;
            var frequency = data.field.frequency;

            var remarks = data.field.remarks;
            var address = data.field.address;

            var port = data.field.port;
            var process = data.field.process;

            var process_ip = data.field.process_ip;
            var sv_ip = data.field.sv_ip;

            var ac_id = data.field.ac_id;
            var linkgroup_id = data.field.linkgroup_id;

            alert(JSON.stringify(data));

            $.ajax({
                type: 'post',
                url: "/devops/monitor_config/",
                data: {name: name,type:type,url: url,frequency:frequency,
                       remarks: remarks,address:address,port: port,process:process,
                       process_ip: process_ip,sv_ip:sv_ip,ac_id: ac_id,linkgroup_id:linkgroup_id
                },
                success: function (res) {
                    if (res.status == 0) {
                        layer.alert(res.msg, {icon: 6}, function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                           //刷新页面
                            parent.location.reload();
                        });
                         //parent.layer.reload();

                    } else {
                        layer.alert(res.msg, {icon: 5}, function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                            //刷新页面
                            parent.location.reload();
                        });
                    }
                }
            });
            return false;
        });
    });

    var typed = xmSelect.render({
                el: '#type',
                name: 'type',
                filterable: true,
                radio: true,
                data: [],
                on: function (data) {
                    //alert(JSON.stringify(data));
                    //debugger;
                    showfunc(data);
                }
            });

    var linkgroupid = xmSelect.render({
                el: '#linkgroup_id',
                name: 'linkgroup_id',
                filterable: true,
                radio: true,
                data: []
            });



    var alerttype = xmSelect.render({
                el: '#alert_type',
                name: 'alert_type',
                filterable: true,
                radio: true,
                data: []
            });


    var svip = xmSelect.render({
                el: '#sv_ip',
                name: 'sv_ip',
                filterable: true,
                radio: true,
                data: []
            });

    var acid = xmSelect.render({
                el: '#ac_id',
                name: 'ac_id',
                filterable: true,
                radio: true,
                data: []
            });



    var test = {
        method1: function (data)
        {
            linkgroupid.update({data:data});
        },
        method2: function (data) {
            alerttype.update({data:data});
        },
        method3: function (data) {
            svip.update({data:data});
            window.svip_data = data;
        },
        method4: function (data) {
            acid.update({data:data});
            window.acid_data = data;
        },
        method5: function (data) {
            //alert(data.type_list);
            //debugger;
            //window.da = data;
            typed.update({data:data});
            //typed.update({data:data.type_list});
        }
    }



    function showfunc(data) {

        //var selectedOption=value.options[value.selectedIndex];
        var value = data.arr[0].value;
            //alert(selectedOption);
            //alert(value);
            if(value === 0){
                var sHtml = '';
                sHtml += '<div class="layui-form-item">\
                    <label class="layui-form-label required"> 监控URL </label>\
                    <div class="layui-input-block">\
                        <input type="text" name="url" id="url" lay-verify="required" lay-reqtext="监控地址不能为空" placeholder="请输入监控地址" value="" class="layui-input">\
                    </div>\
                </div>';
                document.getElementById("monitor_content").innerHTML = sHtml;

            }

            if (value === 1){
                var sHtml = '';
                sHtml += '<div class="layui-form-item">\
                        <label class="layui-form-label required">监控地址</label>\
                        <div class="layui-input-block">\
                        <input type="text" name="address" id="address" lay-verify="required" lay-reqtext="监控地址不能为空" placeholder="请输入监控地址" value="" class="layui-input">\
                    </div>\
                    </div>\
                    <div class="layui-form-item">\
                    <label class="layui-form-label required">监控端口</label>\
                    <div class="layui-input-block">\
                        <input type="text" name="port" id="port" lay-verify="required" lay-reqtext="监控端口不能为空" placeholder="请输入监控端口" value="" class="layui-input">\
                    </div>\
                </div>';

                document.getElementById("monitor_content").innerHTML = sHtml;
            }


            if (value === 2){
                var sHtml = '';
                sHtml += '<div class="layui-form-item">\
                        <label class="layui-form-label required">进程所在主机</label>\
                        <div class="layui-input-block">\
                            <div  id="pip" name="pip" class="layui-input-block"></div>\
                        </div>\
                    </div>\
                    <div class="layui-form-item">\
                    <label class="layui-form-label required">进程关键字</label>\
                    <div class="layui-input-block">\
                        <input type="text" name="port" id="port" lay-verify="required" lay-reqtext="监控端口不能为空" placeholder="请输入监控端口" value="" class="layui-input">\
                    </div>\
                </div>';

                document.getElementById("monitor_content").innerHTML = sHtml;

                //var all_data;
                //alert(JSON.stringify(all_data));
                var processip = xmSelect.render({
                    el: '#pip',
                    name: 'process_ip',
                    filterable: true,
                    radio: true,
                    data: []
                });
                processip.update({data:svip_data});
            }

            window.form.render();

    }


</script>
</body>
</html>